<template>
  <div class="page-mobile_distribution_order">
    <white-header
      :isShowTopNav="true"
      :isShowBack="true"
      :isShowRight="true"
      title="分销订单"
    ></white-header>
    <div class="header">
      <div class="header-title">
        <img src="/img/mobile/distribution_commission.png" alt="">
        <div>我的佣金</div>
      </div>
      <div class="header-list">
        <div class="list-item">
          <div class="item-money">￥<span>{{distribution_info.profit ? (distribution_info.profit-distribution_info.freezeMoney).toFixed(2) : "0.00"}}</span></div>
          <div class="item-name">待提现金额</div>
        </div>
        <div class="list-item">
          <div class="item-money">￥<span>{{distribution_info.freezeMoney ? distribution_info.freezeMoney.toFixed(2) : "0.00"}}</span></div>
          <div class="item-name">未到账金额</div>
        </div>
        <div class="list-item">
          <div class="item-money">￥<span>{{distribution_info.profit ? distribution_info.profit.toFixed(2) : "0.00"}}</span></div>
          <div class="item-name">累计金额</div>
        </div>
      </div>
      <div class="order-count">累计订单数（个）：<span>{{total}}</span></div>
    </div>
    <div class="order-container">
      <div class="order-item" v-for="(item,index) in distribution_order_list" :key="index">
        <div class="order-top">
          <div class="t-left">{{item.courseName}}</div>
          <div class="t-right">￥<span>{{item.distributionMoney.toFixed(2)}}</span></div>
        </div>
        <div class="order-bottom">
          <div class="b-left">
            <div class="left-item">支付时间：{{trimDate(item.orderTime)}}</div>
            <div class="left-item">订单金额：￥{{Number(item.coursePrice).toFixed(2)}}</div>
            <div class="left-item">预计到账时间：{{trimDate(item.orderTime+86400000*distribution_info.freezeDay)}}</div>
          </div>
          <div class="b-right">
            <span class="pink" v-if="formatStatus(item.orderTime)">待到账</span>
            <span class="blue" v-else>已到账</span>
          </div>
        </div>
      </div>
      <div class="footer">
        <span class="tips">我是有底线的</span>
      </div>
    </div>
  </div>
</template>

<script>
import { getDistributionOrder,getDistributionInfo } from "~/api/distribution";
import { mapState, mapActions, mapMutations } from "vuex";
import WhiteHeader from "~/components/mobile/WhiteHeader.vue";
export default {
  components: {
    WhiteHeader
  },
  scrollToTop: true,
  data() {
    return {
      page: 1,
      pageSize: 10,
      total: 0,
      records: 0,
      distribution_order_list: [],
      distribution_info: {},
    };
  },
  computed: {
    ...mapState({
      user_info(state) {
        return state.user_info;
      },
      is_loading(state) {
        return state.is_loading;
      },
    }),
  },
  watch: {},
  methods: {
    ...mapMutations(["SET_IS_LOADING"]),
    formatStatus(val){
      if((val+86400000*this.distribution_info.freezeDay) > new Date().getTime()){
        return true;
      }else{
        return false;
      }
    },
    trimDate(date) {
      if (date) {
        let _date = new Date(date);
        var year = _date.getFullYear();
        var month = _date.getMonth() + 1;
        var date = _date.getDate();
        var hours = _date.getHours();
        var minutes = _date.getMinutes();
        if (month < 10) {
          month = "0" + month;
        }
        if (date < 10) {
          date = "0" + date;
        }
        if (hours < 10) {
          hours = "0" + hours;
        }
        if (minutes < 10) {
          minutes = "0" + minutes;
        }
        return year + "." + month + "." + date + " " + hours + ":" + minutes;
        // return `${_date.getFullYear()}.${_date.getMonth() +
        //   1}.${_date.getDate()} ${_date.getHours()}:${'0'+_date.getMinutes()}`;
      } else {
        return "未知";
      }
    },
    toPath(path) {
      this.$router.push(path);
    },
    throttle(fn, delay) {
      let lastTime = 0;
      return !(function () {
        let nowTime = Date.now();
        if (nowTime - lastTime > delay) {
          fn.call(this);
          lastTime = nowTime;
        }
      })();
    },
    pullUp() {
      // 滚动条离顶部的距离
      let scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      // 窗口可视区域高度
      let clientHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      // 滚动区域高度
      let scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight;
      // 滚动条 + 可视区域高度 >= 滚动条高度 ==>  滚动条触底
      if (scrollTop + clientHeight >= scrollHeight-120) {
        console.log("上拉加载");
        if (this.total <= this.distribution_order_list.length) {
          return;
        }
        if (this.is_loading) {
          return;
        }
        this.page++;
        this.getData("pullup");
      }
    },
    eventListener() {
      this.throttle(this.pullUp, 300);
    },
    async getDistributionInfo() {
        this.SET_IS_LOADING(true);
      let params = {
        userId: this.user_info.id,
      };
      let result = await getDistributionInfo(params);
      if (result && result.data && result.data.code == 200) {
        this.distribution_info = result.data.data;
        this.SET_IS_LOADING(false);
      } else {
        // this.$Message.error("获取失败！");
        this.$toast("获取失败！");
        this.SET_IS_LOADING(false);
      }
    },
    async getData(fetch_type) {
      this.SET_IS_LOADING(true);
      let result = await getDistributionOrder({
        sort: "id desc",
        offset: this.pageSize * (this.page - 1),
        limit: this.pageSize,
        userId: this.user_info.id,
      });
      if (result && result.data.code == 200) {
        if (fetch_type == "pullup") {
          this.distribution_order_list = [
            ...this.distribution_order_list,
            ...result.data.data.rows,
          ];
        } else {
          this.distribution_order_list = result.data.data.rows;
        }
        // this.distribution_order_list.sort(function (a, b) {
        //   return b.createTime - a.createTime;
        // });
        this.total = result.data.data.total;
        this.records = result.data.data.records;
        this.SET_IS_LOADING(false);
      } else {
        this.SET_IS_LOADING(false);
        this.$toast("获取失败！");
      }
    },
  },
  activated() {
    if (process.client) {
      window.addEventListener("scroll", this.eventListener);
    }
    this.getData();
    this.getDistributionInfo();
  },
  deactivated() {
    if (process.client) {
      window.removeEventListener("scroll", this.eventListener);
    }
  },
  destroyed() {
    if (process.client) {
      window.removeEventListener("scroll", this.eventListener);
    }
  },
  created() {
    this.getData();
    this.getDistributionInfo();
  },
  mounted() {
    if (process.client) {
      window.addEventListener("scroll", this.eventListener);
    }
  },
};
</script>

<style lang="scss" scoped>
.page-mobile_distribution_order {
  width: 7.2rem;
  min-height: 100vh;
  background-color: #f7f7fa;
  .footer {
      padding: 0.3rem;
      font-size: 0.26rem;
      color: #babec2;
      text-align: center;
      .tips {
        position: relative;
      }
      .tips::before {
        content: "";
        display: block;
        position: absolute;
        left: -1.7rem;
        top: 50%;
        transform: translateY(-1px);
        width: 1.5rem;
        height: 1px;
        background: #babec2;
      }
      .tips::after {
        content: "";
        display: block;
        position: absolute;
        right: -1.7rem;
        top: 50%;
        width: 1.5rem;
        transform: translateY(-1px);
        height: 1px;
        background: #babec2;
      }
    }
  .header{
    width: 7.2rem;
    height: 4.128rem;
    background-color: var(--theme-color);
    box-sizing: border-box;
    padding: .288rem;
    .header-title{
      display: flex;
      align-items: center;
      color: #ffffff;
      font-weight: bold;
      font-size: .3072rem;
      img{
        display: block;
        width: .31679rem;
        height: .31679rem;
        margin-right: .1rem;
      }
    }
    .header-list{
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin-top: .6rem;
      margin-bottom: .6rem;
      .list-item{
        width: 33.3333%;
        height: .96rem;
        text-align: center;
        color: #ffffff;
        .item-money{
          margin-bottom: .1rem;
          font-size: .288rem;
          span{
            font-size: .4224rem;
          }
        }
        .item-name{
          font-size: .2688rem;
        }
      }
    }
    .order-count{
      height: 1rem;
      font-size: .2688rem;
      color: #ffffff;
      line-height: 1rem;
      border-top:1px solid rgba(255,255,255, .4);
      span{
        font-size: .4224rem;
      }
    }
  }
  .order-container{
    width: 7.2rem;
    margin: .2rem 0 0;
    .order-item{
      width: 100%;
      height: 3.936rem;
      background-color: #ffffff;
      box-sizing: border-box;
      padding:  .5rem .288rem 0;
      border-bottom: 1px solid #ededf1;
      &:last-child{
        border: none;
      }
      .order-top{
        display: flex;
        justify-content: space-between;
        color: #4a4b4d;
        width: 100%;
        height: .78rem;
        .t-left{
          width: 80%;
          font-size: .3264rem;
          display: -webkit-box;
          -webkit-line-clamp:2;
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-box-orient: vertical;
        }
        .t-right{
          height: 20%;
          font-size: .2304rem;
          span{
            font-size: .3264rem;
          }
        }
      }
      .order-bottom{
        display: flex;
        justify-content: space-between;
        width: 100%;
        margin-top: .3rem;
        .b-left{
          width: 80%;
          .left-item{
            margin: .3rem 0;
            color: #adb0b3;
            font-size: .2496rem;
          }
        }
        .b-right{
          text-align: right;
          margin: .3rem 0;
          width: 20%;
          font-size: .2496rem;
          .pink{
            color: #f99797;
          }
          .blue{
            color: #5b96ff;
          }
        }
      }
    }
  }
}
</style>
<style lang="scss">
.page-mobile_distribution_order {
  
}
</style>
